<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>径向渐变</title>
		<style>
		canvas{border:1px solid #ddd;
				display: block;margin: 50px auto; }
	 </style>
	</head>
	<body>		
		<canvas id="canvas" ></canvas>
	</body>
	<!--
		Radial Gradient
		HTML DOM CanvasRenderingContext2D 对象
		定义和用法
		createRadialGradient() 方法创建一条放射颜色渐变。
		语法
		createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
				参数	描述
			xStart, yStart	    开始圆的圆心的坐标。
			radiusStart   	  开始圆的半径。
			xEnd, yEnd	           结束圆的圆心的坐标。
			radiusEnd	                    结束圆的半径。
			返回值
			表示一个放射性颜色渐变的一个 CanvasGradient 对象。
			描述
			这个方法创建并返回了一个新的 CanvasGradient 对象，
			该对象在两个指定圆的圆周之间放射性地插值颜色。
			注意，这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。
			要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。
			放射性渐变的绘制方法
			使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色，
			在两个位置之间的圆上插入颜色值（红色、绿色、蓝色和 alpha）。
	
		var grd =context.createRadialGradient();
		grd.addcolorStop();
	-->
	<script>
		
		var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =880;
	var context=canvas.getContext('2d');
	
	var radiaGrid =context.createRadialGradient(400,400,10,400,400,500);
	 radiaGrid.addColorStop(0.0,"#fff");
 	 radiaGrid.addColorStop(0.3,"blue");
 	 radiaGrid.addColorStop(0.5,"yellow");
 	 radiaGrid.addColorStop(0.7,"red");
 	 radiaGrid.addColorStop(1.0,"#000");
 	 context.fillStyle=radiaGrid;
 	 context.fillRect(0,0,800,800);//绘制一个矩形
		
	</script>
</html>
